<%
var isAdd=isEmpty(tariffClass.id);
var headContent = {
%>
<style type="text/css">
    /*验证：提示信息样式 begin*/
    .am-alert-danger {
        background-color: transparent;
        border-color: transparent;
        color: #ff0000;
    }

    .am-alert {
        margin-bottom: 1em;
        padding: .625em;
        background: transparent;
        border: none;
        border-radius: 0;
    }

    /*验证：提示信息样式 end*/
</style>
<%};%>
<%layout("/common/_layout.html",{head:headContent}){%>
<form id="form" method="POST" class="am-form"
      action="<%if(isAdd){%>${base}/tariffClass/save<%}else{%>${base}/tariffClass/update<%}%>">
    <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg"
                                         onclick="window.history.back(); return false;">业务大类管理</strong> /
            <small>业务大类配置</small>
        </div>
    </div>
    <input type="hidden" name="tariffClass.id" value="${tariffClass.id!}"/>
    <!--选项卡（tabs）begin-->
    <div class="am-tabs am-margin" data-am-tabs>
        <ul class="am-tabs-nav am-nav am-nav-tabs">
            <li class="am-active"><a href="#tab1">业务大类配置信息</a></li>
        </ul>




        <div class="am-tabs-bd">

            <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                <!--验证表单元素（validate) begin-->
                <!--input begin-->

                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                        <span style="color: red;">*</span>大类名称
                    </div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <input type="hidden" value="${tariffClass.id!}" id="tariffClassId"/>
                        <input type="text" class="am-input" data-validation-message="大类名称不能为空" placeholder="请输入大类名称"
                               id="tariffClassName" name="tariffClass.name" value="${tariffClass.name!}" maxlength="128" required/>
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg">
                        <div class="am-alert am-alert-danger">${tariffClassNameMessages!}</div>
                    </div>
                </div>





                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-2 am-u-md-2 am-text-right">
                        <span style="color: red;">*</span>所属活动
                    </div>
                    <div class="am-u-sm-8 am-u-md-8">
                        <input type="hidden" value="" id="activity_ids" name="activity_ids"/>
                        <select  data-validation-message="请选择所属活动"  required onchange="getTariffClassVal()"
                                 multiple data-am-selected="{btnWidth:'100%',maxHeight:180,maxWidth:200,searchBox: 1}" id="tariff_class_select" name="tariff_class_select">
                            <%for(activityTariffClassRelation in activityTariffClassRelationList){%>
                            <option value="${activityTariffClassRelation.activity_id}" selected>${activityTariffClassRelation.detail_name} - ${activityTariffClassRelation.name}</option>
                            <%}%>
                            <%for(activity in activityList){%>
                            <option  value="${activity.id}" >${activity.detail_name} - ${activity.name}</option>
                            <%}%>
                        </select>
                    </div>
                    <div class="am-u-sm-2 am-u-md-2 input-msg"></div>
                </div>




                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                        是否启用
                    </div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <input type="hidden" name="tariffClass.enabled" value="${tariffClass.enabled!'0'}"/>
                        <input data-am-switch id="enabled" type="checkbox" <%if(tariffClass.enabled! == 1){%> checked
                        <%}%>data-size="sm" data-off-text="否" data-on-text="是" value="${tariffClass.enabled!'1'}"
                        style="display:none;"/>
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                </div>


                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                        图片路径
                    </div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <input type="text" id="icon_url" name="tariffClass.icon_url" value="${tariffClass.icon_url!''}"
                               placeholder="请上传图片（ *.gif,*.jpg,*.jpeg,*.png ）"/>
                    </div>
                    <div class="am-u-sm-2 am-u-md-4">
                        <div class="am-form-file am-text-xs">
                            <button type="button" class="am-btn am-btn-primary am-btn-sm">
                                <i class="am-icon-cloud-upload"></i> 选择要上传的文件
                            </button>
                            <input id="fileupload" type="file" name="files[]" multiple>
                        </div>
                        <!-- The global progress bar -->
                        <div id="progress-area" class="am-margin-top-sm am-hide">
                            <div id="progress-text" class="am-text-xs am-text-right"></div>
                            <div id="progress" class="am-progress am-progress-xs">
                                <div class="am-progress-bar" style="width: 0%"></div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                        <span style="color: red;">*</span>排序字段
                    </div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <input data-validation-message="输入排序字段,只能是整数" type="text" name="sort" id="sort" minlength="1"
                               maxlength="10" placeholder="输入排序字段" required value="${tariffClass.sort!''}"
                               pattern="^[0-9]*$"/>
                    </div>
                    <div class="am-u-sm-4 am-u-md-4 input-msg" id="urlErrMsg"></div>
                </div>


                <!--验证表单元素（validate end-->
            </div>
        </div>
    </div>
    <!--选项卡（tabs）end-->
</form>
<div class="am-margin">
    <button type="button" id="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
    <button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="javascript: History.back();">返回上一级
    </button>
</div>
<script type="text/javascript" src="${base}/ueditor/ueditor.config.js?jid=2"></script>
<script type="text/javascript" src="${base}/ueditor/ueditor.all.min.js?jid=2"></script>
<script type="text/javascript" src="${base}/ueditor/ueditor.parse.min.js?jid=2"></script>
<script src="${base}/template/jQuery-File-Upload/js/jquery.fileupload.js"></script>


<script src="${base}/template/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script src="${base}/template/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script src="${base}/template/jQuery-File-Upload/js/jquery.fileupload.js"></script>

<script type="text/javascript">

    var getTariffClassVal = function(){
        var activity_ids = $("#tariff_class_select").val();
        $("#activity_ids").val(activity_ids);
    }
    var myMsg = "";

    $(function () {

        getTariffClassVal();
        /*switch开关 begin*/
        $("#enabled").on({
            "switchChange.bootstrapSwitch": function (event, state) {
                $enabled = $("input[name='tariffClass.enabled']");
                if (state) {
                    $enabled.val(1)
                } else {
                    $enabled.val(0);
                }
                //console.log($enabled.val());
            }
        });
        /*switch开关 end*/

        /*富文本编辑器：ueditor begin*/
        //var ue = UE.getEditor('container');
        /*富文本编辑器：ueditor end*/
        /*表单验证：begin*/
        //自定义规则，用法：验证元素上加class="js-pattern-sort"
        if ($.AMUI && $.AMUI.validator) {
            $.AMUI.validator.patterns.sort = /^([0-9]+)$/;
        }



        $("#form").validator({
            // 域通过验证时回调
            onValid: function (validity) {
                $(validity.field).closest('.am-form-group').find('.am-alert').hide();
            },
            // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
            onInValid: function (validity) {
                var $field = $(validity.field);

                var field_id = $field.attr('id');

                var $group = $field.closest('.am-form-group');
                var $alert = $group.find('.am-alert');

                // 使用自定义的提示信息 或 插件内置的提示信息
                var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

               if(field_id=="tariffClassName"){
                    msg = myMsg;
               }
                if (!$alert.length) {
                    $alert = $("<div class='am-alert am-alert-danger'></div>").hide().appendTo($group.find(".input-msg"));
                }
                console.log("onInValid : " + $field.val());
                $alert.html(msg).show();
            },
            //自定义验证
            validate: function (validity) {
                /**
                 * 校验资费大类名称唯一性
                 */
                var validityNameUnique = function(){
                    var tariffClassName = $("#tariffClassName").val();
                    var params = {tariffClassName:tariffClassName,tariffClassId:$("#tariffClassId").val()};
                    if(tariffClassName && tariffClassName.trim().length>1){
                        $.ajax({
                            type: "post",
                            url: "../tariffClass/validityCodeUnique",
                            data: params,
                            dataType: "json",
                            async:false,
                            success: function(data) {
                                if(data.resultCode != 1000){
                                    myMsg = "业务大类名称已存在";
                                    validity.valid = false;
                                }else{
                                    validity.valid = true;
                                }
                            },
                            error : function(textStatus) {
                                validity.valid = false;
                            }
                        });
                    }else{
                        myMsg = "大类名称不能为空";
                        validity.valid = false;
                    }
                };
                if ($(validity.field).is('#tariffClassName')) {
                    validityNameUnique();
                };
            }
        });

        $("#submit").on("click", function () {
            $("#form").submit();
        });

        /*表单验证：end*/

        /*附件上传：begin*/
        var jqXHR = $('#fileupload').fileupload({
            url: "${base}/upload/image/",
            dataType: 'json',
            start: function (e) {
                $("#progress-area").removeClass("am-hide");
                $("#progress-text").removeClass("am-text-danger");
                $("#progress-text").html("");
                $(".am-progress-bar").css("width", "0%");
            },
            done: function (e, data) {
                console.log(data);
                $("#icon_url").val(data.result.url);
                setTimeout(function () {
                    $("#progress-area").addClass("am-hide");
                }, 1500);
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $(".am-progress-bar").css("width", progress + "%");
                $("#progress-text").html(progress + "%");
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log("imageupload error！");
                // console.log(jqXHR);
                // console.log(textStatus);
                // console.log(errorThrown);
                $("#progress-area").removeClass("am-hide");
                $("#progress-text").addClass("am-text-danger");
                $("#progress-text").html("imageupload error！");
                $(".am-progress-bar").css("width", "0%");
                setTimeout(function () {
                    $("#progress-area").addClass("am-hide");
                }, 2000);
            },
            fail: function (jqXHR, textStatus) {
                console.log("imageupload fail！");
                // console.log(jqXHR);
                // console.log(textStatus);
                $("#progress-area").removeClass("am-hide");
                $("#progress-text").addClass("am-text-danger");
                $("#progress-text").html("imageupload fail！");
                $(".am-progress-bar").css("width", "0%");
                setTimeout(function () {
                    $("#progress-area").addClass("am-hide");
                }, 2000);
            }
        });
        /*附件上传：end*/

    });


</script>
<%}%>